<!-- /*
 * @Author: 俞明月
 * @Date:   2022-01-30
 * @Last Modified by:   俞明月
 * @Last Modified time: 2022-01-30
 */ -->
<template>
	<div class="ui-mode-container ui-mode-box flex-col">
        <div class="ui-header-item gradient">
            <div class="ui-header-arraw prev" @touchstart.stop @click="handleHistory">
                <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
            </div>
            <div class="ui-header-title">我的优惠券</div>
            <div class="ui-header-arraw next flex-row align-center" @touchstart.stop @click="handleHome">
                <i class="iconfont icon iconi-home"></i>
            </div>
        </div>
        <div class="ui-mode-content flex1 flex-col" ref="scrollPage">
            <div class="mt-tab-item flex-row align-stretch">
                <a href="javascript:;" class="flex1" :class="{current:i==index}" @click="handleChangeTab(i)" :key="i" v-for="(item,i) in menu">{{item.title}}</a>
            </div>
            <div class="mt-tab-content relative flex1">
                <div class="ui-mode-box" :style="{display:index==0?'block':'none'}">
                    <inner-useful v-if="menu[0].flag" ref="useful"></inner-useful>
                </div>
                <div class="ui-mode-box" :style="{display:index==1?'block':'none'}">
                    <inner-used v-if="menu[1].flag" ref="used"></inner-used>
                </div>
                <div class="ui-mode-box" :style="{display:index==2?'block':'none'}">
                    <inner-expire v-if="menu[1].flag" ref="expire"></inner-expire>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
import innerUseful from './list/useful';
import innerExpire from './list/expire';
import innerUsed from './list/used';
export default {
    name: 'home/agent',
    data() {
        return {
            public_agent_info:{},
            public_user_info:{},
            index:null,
            menu:[
                {
                    flag:false,
                    title:'未使用'
                },
                {
                    flag:false,
                    title:'已使用'
                },
                {
                    flag:false,
                    title:'已过期'
                }
            ]
        }
    },
    mixins:[
        mixinCommon,
        mixinRequest
    ],
    components:{
        innerUseful,
        innerExpire,
        innerUsed
    },
    computed:{
        getIndex(){
            return this.$route.query.index||0;
        }
    },
    watch:{
        resourceLoaded:{
            handler(flag){
                flag&&this.$nextTick(this.init); 
            },
            immediate:true
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        // 初始化
        init(){
            this.showLoading();
            this.handleChangeTab(this.getIndex);
        },
        // tab切换
        handleChangeTab(i){
            if(i!=this.index){
                this.index=i;
                if(!this.menu[this.index].flag){
                    this.menu[this.index].flag=!this.menu[this.index].flag;
                };
                this.goRedirect();
            };
        },
        /*
         * 跳转redirect
         */
        goRedirect(){
            if(!(this.$route.query.index&&this.$route.query.index==this.index)){
                this.$router.replace({
                    path:'/my/coupon',
                    query:{
                        redirect:this.$route.query.redirect,
                        orderId:this.$route.query.orderId,
                        payway:this.$route.query.payway,
                        index:this.index
                    }
                });
            };
        }
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
.mt-tab-item {
    padding: 0 2rem;
    height: 2.6rem;
    line-height: 2.6rem;
    position: relative;
    border-bottom: solid 1px #eee;
    a{
        color: #4a4a4a;
        cursor: pointer;
        position: relative;
        display: block;
        text-align: center;
        font-size: 0.9rem;
        &.current {
            color: #3bce63;
        }
        &.current:after {
            position: absolute;
            content: '';
            left: 0;
            right: 0;
            bottom: -1px;
            height: 0.2rem;
            border-radius: 0.3rem;
            background: -moz-linear-gradient(left, #81c132 0%, #2ed06c 100%);
            background: -webkit-gradient(linear, left center, right center, color-stop(0%,#81c132), color-stop(100%,#2ed06c));
            background: -webkit-linear-gradient(left, #81c132 0%,#2ed06c 100%);
            background: -o-linear-gradient(left, #81c132 0%,#2ed06c 100%);
            background: -ms-linear-gradient(left, #81c132 0%,#2ed06c 100%);
            background: linear-gradient(to right, #81c132 0%,#2ed06c 100%);
        }
    }
}
</style>